"use client";
import { Avatar, Card, List, Typography } from "antd";
import "./index.css";
import React from "react";
import Link from "next/link";

interface Props {
  questionBankList?: API.QuestionBankVO;
}

/**
 * 题库列表组件
 * @param props
 * @constructor
 */
const QuestionBankList = (props: Props) => {
  const { questionBankList = [] } = props;
  const questionBankView = (questionBank: API.QuestionBankVO) => {
    return (
      <Card style={{ width: 300 }}>
        <Link href={`/bank/${questionBank.id}`}>
          <Card.Meta
            avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=1`} />}
            title={questionBank.title}
            description={
              <Typography.Paragraph
                type="secondary"    //  文本类型
                ellipsis={{ rows: 1 }}  //  自动溢出省略
                style={{ marginBottom: 0 }} //
              >
                {questionBank.description}
              </Typography.Paragraph>
            }
          />
        </Link>
      </Card>
    );
  };

  return (
    <div className="question-bank-list">
      <List
        grid={{
          gutter: 14,   //	栅格间隔
          column: 4,    //	列数
          xs: 1,    // <576px 展示的列数
          sm: 2,    //  ≥576px 展示的列数
          md: 3,    // 	≥768px 展示的列数
          lg: 3,    // 	≥992px 展示的列数
        }}
        dataSource={questionBankList}
        renderItem={(item) => <List.Item>{questionBankView(item)}</List.Item>}
      />
    </div>
  );
};

export default QuestionBankList;
